<template>
	<view class="empty-box">
		<view class="image-box">
			<image class="empty-icon" :src="icon" mode="widthFix"></image>
		</view>
		<view class="empty-text">
			<text v-if="text !== ''">{{ text }}</text>
		</view>
		<button class="empty-btn" v-if="showAction && !isLogin" @tap="clickAction">
			{{ actionText }}
		</button>
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	/**
	 * 容器组件 - 装修组件的样式容器
	 */
	const props = defineProps({
		// 图标
		icon: {
			type: String,
			default: '',
		},
		// 文字描述
		text: {
			type: String,
			default: '空空如也',
		},
		// 是否显示 button
		showAction: {
			type: Boolean,
			default: false,
		},
		// button 文字
		actionText: {
			type: String,
			default: '去登录/注册 >>',
		},
		// 跳转地址
		actionUrl: {
			type: String,
			default: '/pages/index/login'
		}
	});

	const isLogin = sheep.$store('user').isLogin;

	function clickAction() {
		if (props.actionUrl !== '') {
			sheep.$router.go(props.actionUrl);
		}
	}
</script>

<style lang="scss" scoped>
	.empty-box {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 600px;
		align-items: center;

		.image-box {
			.empty-icon {
				width: 240rpx;
			}
		}
	}

	.empty-text {
		font-size: 26rpx;
		font-weight: 500;
		color: #999999;
		text-align: center;
	}

	.empty-btn {
		width: 320rpx;
		height: 70rpx;
		border: 2rpx solid v-bind('buttonColor');
		border-radius: 35rpx;
		font-weight: 500;
		color: v-bind('buttonColor');
		font-size: 28rpx;
		margin-top: 100px;
	}
</style>